<template>
  <!-- <view> -->
      <view class='details_page'>
      <!-- 文章详情 -->
      <view class='det_content' v-if='type == 1'>
        <view class='article'>
          <view class='user_info'>
            <view class='img_item' v-if='article_det.headimgUrl'>
              <image :src='article_det.headimgUrl'></image>
            </view>
            <view class='user'>
              <view class='name'>{{article_det.author}}</view>
              <view>
                {{time(article_det.publishOn,"hh:mm")}} 来自<text class='siteName'>{{article_det.siteName}}</text>
                <text>
                  <text v-if='article_det.level'>【{{article_det.level}}】</text>
                  <text v-if='article_det.groupName != ""'>【{{article_det.groupName}}】</text>
                </text>
              </view>
            </view>
          </view>
          <view class='content'>
            <view>
              <!-- <text>#湖州身边事##在湖州看见美丽中国##2020你好#</text> -->
              <text></text>
              <text>{{article_det.summary}}</text>
            </view>
            <view class='img_list' v-if='article_det.picUrls'>
              <view v-for='(img,index) in article_det.picUrls' :key='index'>
                <image :src='img' mode='widthFix' @tap='previewImage(index,article_det.picUrls)'></image>
              </view>
            </view>
          </view>
        </view>
        <view class='line'></view>
        <view class='article_data'>
          <view class='tab_box' :class='{topping:tab_topping}'>
            <view hover-class='btn_hover2' :class='{tabBar_on:tabBar_index == 0}' @tap='selectTab(0)'>转发（{{article_det.repostCount}}）</view>
            <view hover-class='btn_hover2' :class='{tabBar_on:tabBar_index == 1}' @tap='selectTab(1)'>评论（{{article_det.replyCount}}）</view>
          </view>

          <view class='null_hint'>查看{{tabBar_index==0?"转发":"评论"}}功能尚未开通，敬请期待~</view>
          <!-- 转发列表 -->
          <view class='transmit_list' v-if='false'>
            <view v-for='(item,index) in 10' :key='index'>
              <view class='user_info'>
                <view class='img_item'>
                  <image src='https://s1.ax1x.com/2020/04/21/J8V6b9.jpg'></image>
                </view>
                <view class='user'>
                  <view class='name'>国民幸福</view>
                  <view>今天09:27 来自<text>新浪微博</text></view>
                </view>
              </view>
              <view class='transmit_content'>
                本来队伍形象在网友的心目中蛮好，缺少真实性的政务宣传是致命的，宁缺勿造！（不说并不代表不懂）//                
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class='det_content' v-if="type==0">
        <view class='article_box'>
          <view class='title'>{{article_det.title}}</view>
          <view class='desc'>
            <text>{{article_det.siteName}}<text class='text'>{{article_det.author}}</text></text>
            <text>{{time(article_det.publishOn,"MM-DD hh:mm")}}</text>
          </view>
          <view class='content'>{{article_content}}</view>
        </view>
      </view>

      <!-- 查看全文 -->
      <view class='bottom_btn'>
        <view hover-class='btn_hover' @tap='lookOriginal(0)'>前往APP查看原文</view>
        <view hover-class='btn_hover' @tap='lookOriginal(1)'>查看原文</view>
        <view class='go_top' :class='{go_top_width:top_show}' @tap='goTop'>
          <text class='iconfont icon-fanhuidingbu3'></text>
        </view>
      </view>
    </view>

</template>

<script>
  export default {
    data() {
      return {
        time: this.$time,
        type: 0,
        tabBar_index: 0,
        tab_topping: false,
        scrollTop: 0,
        top_show: false,
        open_type: null,
        article_det: {},
        article_content: ""
      }
    },
    onLoad(option) {
      this.type = option.article_type;
      this.open_type = option.open_type;
      this.article_det = this.$store.state.article_det;
      if(this.type == 0) {
        this.getData()
      }else {
        this.goPage()
      }
      
      
    },
    onReady() {
      this.$nextTick(async () => {
        if(this.type == 1) {
          this.scrollTop = await this.$getDomInfo('.tab_box','top');
        }
        this.scrollTop += uni.upx2px(88);
      })
      

      uni.setNavigationBarTitle({
          title: this.article_det.title
      });
    },
    // 监听页面滚动
    onPageScroll(e) {
      if(e.scrollTop >= this.scrollTop) {
        this.tab_topping = true;
      }else {
        this.tab_topping = false;
      }
      if(e.scrollTop > 100) {
        this.top_show = true
      }else {
        this.top_show = false
      }
    },
    methods: {
      getData() {
        this.$http({
          url: this.$api.article_det,
          data: {
            articleId: this.article_det.articleId,
            ruleId: ""
          }
        }).then( res => {
          if(res.code == 0) {
            this.article_content = res.data;
            this.goPage()
          }
        })
      },
      // 查看原文
      lookOriginal(type) {
        let url = this.article_det.url;
        if(type == 0) {
          plus.runtime.openURL( url );
        }else {
          uni.navigateTo({
            url: '/pages/common/webPage?src='+url
          });
        }
      },
      // 预览图片
      previewImage(current,urls) {
        uni.previewImage({
          current,
          urls,
          indicator: "default",
          loop: true
        })
      },
      // 选择评论、转发
      selectTab(index) {
        this.tabBar_index = index;
      },
      // 滚动到评论、转发位置
      async scrollToPage() {
        let scrollTop = await this.$getDomInfo('.tab_box','top');
        uni.pageScrollTo({
            scrollTop,
            duration: 300
        });
      },
      goPage() {
        if(this.open_type != -1) {
          this.tabBar_index = this.open_type;
          this.$nextTick(() => {
            if(this.type == 1) {
              this.scrollToPage();
            }
          })
        }
      },
      // 返回顶部
      goTop() {
        uni.pageScrollTo({
            scrollTop: 0,
            duration: 500
        });
      }
    }
  }
</script>

<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
page {
  background: #fff;
}
.details_page {
  width: 100%;
  background: #fff;
  padding-bottom: 96upx;
  box-sizing: border-box;
  .det_content {
    width: 100%;
    
    .article,.article_data,.article_box {
      width: 100%;
    }
    .article {
      padding: 25upx;
      box-sizing: border-box;
      margin-bottom: 25upx;
      .user_info {
        width: 100%;
        height: 80upx;
        display: flex;
        align-items: center;
        .img_item {
          width: 70upx;
          height: 70upx;
          border-radius: 100%;
          overflow: hidden;
          margin-right: 20upx;
          >image {
            width: 100%;
            height: 100%;
          }
        }
        .user {
          height: 100%;
          font-size: 24upx;
          color: #999;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name {
            font-size: 34upx;
            color: #333;
            font-weight: 600;
          }
          >view {
            .siteName {
              color: #0084FF;
              margin-left: 10upx;
            }
          }
        }
      }
      .content {
        font-size: 28upx;
        color: #666;
        margin-top: 10upx;
        >view {
          &:nth-child(1) {
            position: relative;
            >text {
              line-height: 40upx;
              &:nth-child(1) {
                color: #0084FF;
                margin-right: 10upx;
              }
            }
          }
        }
        .img_list {
          width: 100%;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          >view {
            width: 220upx;
            height: 220upx;
            border-radius:6upx;
            overflow: hidden;
            border: 1px solid #f9f9f9;
            box-sizing: border-box;
            margin-top: 22upx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20upx;
            &:nth-child(3n) {
              margin: 0;
            }
            >image {
              width: 100%;
            }
          }
        }
      }
    }
    .line {
      width: 100%;
      height: 10upx;
      background: #eee;
    }
    .article_data{
      width: 100%;
      .tab_box {
        width: 100%;
        height: 88upx;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #E2E2E2;
        background: #fff;
        >view {
          height: 100%;
          padding: 0 25upx;
          box-sizing: border-box;
          font-size: 28upx;
          color: #666;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
        }
      }
      .topping {
        position: fixed;
        left: 0;
        top: 0;
        /*  #ifdef  H5  */
        top: 88upx;
        /*  #endif  */
        z-index: 99;
      }
      .transmit_list {
        width: 100%;
        padding: 25upx;
        box-sizing: border-box;
        >view {
          margin-bottom: 25upx;
          border-bottom: 1px solid #f9f9f9;
          padding-bottom: 20upx;
          .user_info {
            width: 100%;
            height: 80upx;
            display: flex;
            align-items: center;
            .img_item {
              width: 70upx;
              height: 70upx;
              border-radius: 100%;
              overflow: hidden;
              margin-right: 20upx;
              >image {
                width: 100%;
                height: 100%;
              }
            }
            .user {
              height: 100%;
              font-size: 24upx;
              color: #999;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .name {
                font-size: 34upx;
                color: #333;
                font-weight: 600;
              }
              >view {
                >text {
                  color: #0084FF;
                  margin-left: 10upx;
                }
              }
            }
          }
          .transmit_content {
            font-size: 24upx;
            color: #666;
            margin-top: 20upx;
            line-height: 40upx;
          }
        }
      }
    }
    .null_hint {
      width: 100%;
      height: 150upx;
      font-size: 26upx;
      color: #999;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .article_box {
      padding: 20upx;
      box-sizing: border-box;
      .title {
        width: 100%;
        padding-bottom: 20upx;
        font-size: 34upx;
        color: #222;
        font-weight: 600;
      }
      .desc {
        font-size: 24upx;
        color: #999;
        padding-bottom: 10upx;
        >text:nth-child(1) {
          margin-right: 25upx;
          .text {
            color: #0084FF;
            margin: 0 20upx;
          }
        }
      }
      .content {
        font-size: 28upx;
        color: #666;
        line-height: 50upx;
      }
    }
  }
  .btn_box {
    width: 100%;
    display: flex;
    align-items: center;
    border-top: 1px solid #E2E2E2;
    >button {
      height: 96upx;
      border-radius: 0;
      font-size: 34upx;
      &:nth-child(1) {
        background: #fff;
        color: #333;
      }
    }
  }
  .bottom_btn {
    width: 100%;
    height: 96upx;
    border-radius: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    background: #0084FF;
    display: flex;
    border-top: 1px solid #eee;
    >view {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 30upx;
      &:nth-child(1) {
        border-right: 1px solid #ccc;
      }
    }
    .go_top {
      flex: none;
      width: 0upx;
      height: 100%;
      background: #fff;
      color: #666;
      transition: all .5s;
      overflow: hidden;
      .iconfont {
        font-size: 60upx;
      }
    }
    .go_top_width {
      width: 200upx;
    }
    
  }
}
</style>